<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <td>商品标题</td>
        <td>商品价格</td>
        <td>商品销量</td>
    </tr>
</table>

<script>
  //如何实例化对象
  let p1 = {};//这是个空对象
  //动态给实例化完成的对象添加属性和方法
  p1.name = "姜桑"
  p1.age = 38
  p1.run = function () {
    console.log(this.name+":"+this.age)
  }
  p1.run();
  //实例化自带属性和方法的对象
  let p2 = {name:"郭桑",age:36,run:function () {
      console.log(this.name+":"+this.age)
    }}
  p2.run();
  //通过数组装对对象的方式封装  列表数据
  let arr = [{title:"姜桑的大腿",price:100,saleCount:300},
      {title:"姜桑的痔疮",price:500,saleCount:1000},
      {title:"姜桑的鼻屎",price:80,saleCount:200}
  ];
  //遍历数组  把数据展示到页面中
  for (const product of arr) {
      //创建行tr
      let tr = document.createElement("tr")
      //创建列td
      let titleTd = document.createElement("td")
      let priceTd = document.createElement("td")
      let saleCountTd = document.createElement("td")
      //把3个td装进tr
      titleTd.innerText = product.title
      priceTd.innerText = product.price
      saleCountTd.innerText = product.saleCount

      tr.append(titleTd,priceTd,saleCountTd);
      //把tr装进table
      let table = document.querySelector("table")
      table.append(tr)
  }
</script>
</body>
</html>